<template>
	<view class="cheap-main">
		<!-- list -->
		<view class="hot-list">
			<view class="list-line" v-if="listData" v-for="(item,index) in listData" :key="index" @click="toSingle(item.id)">
				<view class="car-img">
					<image :src="item.image"></image>
				</view>
				<view class="car-des">
					<view class="car-title">{{item.name}}<text class="car-type">{{item.level_value}}</text></view>
					
					<view class="car-price ">
						<view class="f24 tb">
							<text class="f30">{{item.special_price}}</text><text v-if="item.special_price!='暂无'">万</text>起
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="nomore" v-else>
				<text class="iconfont iconmeiyoushuju"></text>
				<view>暂无该车型数据~</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		cheap,
	} from "../../../../apis/new-car/index.js"
	export default{
		data(){
			return{
				listData:[],
				city:''
			}
		},
		onLoad() {
			let _self = this
			uni.getStorage({
				key:'position',
				success(e) {
					_self.city = e.data
				}
			})
			_self.getList(_self.city);
		},
		methods: {
			/**单个车型明细*/
			toSingle(id) {
				uni.navigateTo({
					url: '../../detail/carSingle/carSingle?cid=' + id 
				})
			},
			getList(params){
				let _self = this
				cheap(params).then(res => {
					_self.listData = res.data.list;
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.cheap-main{
		  background: #fff;
		  position: relative;
		
		.ml10{
			margin-left: 10rpx;
		}
		.filter{
		  display: flex;
		  width: 100%;
		  height: 88rpx;
		}
		.Factive{
		  color: #E41805;
		}
		.filter-btn{
		  margin-right: 50rpx;
		  height: 100%;
		  line-height: 88rpx;
		  font-size: 30rpx;
		}
		.filter-btn:first-child{
		  margin-left: 30rpx;
		}
		.iconfont{
		  margin-left: 10rpx;
		}
		.iconfont.active{
		  color: #E41805;
		}
		/* 选择按钮 */
		.select{
		  height: 62rpx;
		  margin:110rpx 30rpx 20rpx;
		  white-space: nowrap;
		}
		.select-btn{
		  display: inline-block;
		  padding:0 30rpx ;
		  height:62rpx;
		  color: #333;
		  font-size: 30rpx;
		  margin-right: 20rpx;
		  text-align: center;
		  line-height: 62rpx;
		  background:rgba(245,245,245,1);
		  border-radius:10rpx;
		}
		.select-btn.active{
		  background-color: #FFE9E7;
		  color: #E41805;
		}
		/*  */
		.tips{
		  background: #f8f8f8;
		  color: #676767;
		  font-size: 20rpx;
		  line-height: 40rpx;
		  padding-left: 30rpx;
		}
		/* 排行榜单 */
		.hot-list{
		  width: 100%;
		  background: #fff;
		}
		.list-line{
		  display: flex;
		  margin:  30rpx;
		  align-items: center;
		}
		.car-des{
		  flex: 2;
		}
		.car-img{
		  width: 264rpx;
		  height: 140rpx;
		  margin:0 24rpx 0 5rpx;
		}
		.car-img image{
		  width: 100%;
		  height: 100%;
		}
		.car-title{
		  font-size: 30rpx;
		  line-height: 36rpx;
		  color: #333;
		}
		.car-type{
		  font-size: 24rpx;
		  margin-left: 20rpx;
		  color: #999;
		}
		.sugges-text{
		  display: flex;
		  width: 100%;
		  margin-top: 12rpx;
		  align-items: center;
		}
		.car-price{
		  margin-top: 14rpx;
		  display: flex;
		}
		.f24{
		  font-size: 24rpx;
		  color: #999;
		}
		.cf98{
		  color: #F9840E!important;
		  margin-left: auto;
		}
		.icon-price{
		  width: 14rpx;
		  height: 18rpx;
		  font-size: 24rpx;
		  display: inline-block;
		  // margin:0 15rpx 0 30rpx;
		}
		.f30{
		  color: #E41805!important;
		  font-size: 30rpx;
		}
		.tb{
		  align-self: flex-end;
		}
		.link-btn{
		  width:158rpx;
		  height:50rpx;
		  border:1px solid #FB830E;
		  border-radius:10rpx;
		  line-height: 50rpx;
		  color: #FB830E;
		  font-size: 24rpx;
		  text-align: center;
		  margin-left: auto;
		}
		/* 字母导航 */
		.navigation-bars{
		  z-index: 45;
		  position: fixed;
		  top:83rpx;
		  right: 0rpx;
		  width: 30rpx;
		}
		.navigation-bars-initial {
		  display: flex;
		  width: 24rpx;
		  height: 24rpx;
		  justify-content: center;
		  align-items: center;
		  color: #999;
		  margin: 15rpx auto;
		  font-size: 20rpx;
		  border-radius: 50%;
		}
		.navigation-bars-initial.active{
		  background: #E41805;
		  color: #fff;
		}
		.letter-scroll{
		  position: relative;
		  height: 100vh;
		  overflow: hidden;
		}
		/* -------------------- */
		.scroll{
		  width: 100%;
		  position: fixed;
		  top: 88rpx;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 15;
		  background: #fff;
		}
		.scroll-view-item {
		  height: auto;
		}
		.letter-title{
		  background: #f8f8f8;
		  color:#969696;
		  height: 40rpx;
		  line-height: 40rpx;
		  font-size: 20rpx;
		  padding-left: 30rpx;
		}
		.letter-record{
		  display: flex;
		  height: 106rpx;
		  padding-left: 30rpx;
		  align-content: center;
		  align-items: center;
		}
		.letter-img{
		  margin:0 50rpx 0 20rpx;
		  width: 95rpx;
		  height: 65rpx;
		  text-align: center;
		}
		.icon-logo{
		  width: 95rpx;
		  height: 65rpx;
		}
		.letter-name{
		  font-size: 28rpx;
		  color: #333;
		}
		
	}
</style>
